<template>
<div class="aiMsgItem">
    
    <div class="deepIcon">
        <div class="deepIconWrapper">
            <img :src="icon"/>
        </div>        
    </div>

    <div class="msgWrapper" v-html="compiledMarkdown" v-if="!loading">        
    </div>

    <div class="msgWrapper"  v-if="loading">        
        <van-loading />
    </div>
    
</div>
</template>

<script lang="ts" setup>
import icon from '@/assets/icons/icon_deepseek_blue.png'
import {marked} from 'marked';
import { computed } from 'vue';

const props = defineProps({
    msg:String,
    loading:Boolean
})

const compiledMarkdown = computed(() => {
    if(props.msg){
        return marked(props.msg);
    }else{
        return ''
    }
   
});

</script>

<style lang="less" scoped>
.aiMsgItem{    
    display: flex;
    padding:0 10px 15px 0;

    .msgWrapper{        
        margin:10px;        
        background-color: #fff;
        color:#333;        
        border-radius: 4px;
        padding:10px;
        font-size: 16px;
        line-height: 1.5em;
        width: 100px;
        flex-grow: 1;
        word-wrap: break-word;
        word-break: break-all;
        white-space: break-spaces;
    }

    .deepIcon{
        padding-top: 10px;
        padding-left: 10px;
        .deepIconWrapper{
            border:1px solid blue;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        img{
            width:30px;            
        }
    }
}
</style>